﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UserShow</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="~/Administrator/UserShow/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Administrator/UserShow/css/font-awesome.css" rel="stylesheet" />

    <!-- Data Tables -->
    <link href="~/Administrator/UserShow/css/dataTables.bootstrap.css" rel="stylesheet" />
    <link href="~/Administrator/UserShow/css/animate.css" rel="stylesheet" />
    <link href="~/Administrator/UserShow/css/style.css" rel="stylesheet" />
    @* AJAX辅助方法 *@
<script src="~/script/jquery.validate.unobtrusive.min.js"></script>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>用户信息浏览 <small>查找，删除</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="table_data_tables.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="table_data_tables.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table id="UserTable" class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                                <tr>
                                    <th>用户ID</th>
                                    <th>昵称</th>
                                    <th>手机号</th>
                                    <th>用户状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- 全局js -->
    <script src="~/Administrator/UserShow/js/jquery.min.js"></script>
    <script src="~/Administrator/UserShow/js/bootstrap.min.js"></script>


    <script src="~/Administrator/UserShow/js/jquery.jeditable.js"></script>

        <!-- Data Tables -->
    <script src="~/Administrator/UserShow/js/jquery.dataTables.js"></script>
    <script src="~/Administrator/UserShow/js/dataTables.bootstrap.js"></script>

        <!-- 自定义js -->
    <script src="~/Administrator/UserShow/js/content.js"></script>


        <!-- Page-Level Scripts -->
        <script>
            $(function () {
                $.getJSON("../api/Users", LoadUsers)
            })
            function LoadUsers(data) {
                console.log(data)
                $("#UserTable").find("tr:gt(0)").remove();
                $.each(data, function (key, val) {
                    var row = `<tr class="gradeX">
                                    <td>${val.ID}</td>
                                    <td>
                                        ${val.Name} 
                                    </td>
                                    <td>${val.Phone}</td>
                                    <td class="center">${val.Ban}</td>
                                    <td class="center">
                                        <a href="javascript:" onclick="Remove(${val.ID})">删除</a>
                                    </td>
                                </tr>`;
                    $("#UserTable").append(row);
                })
            }
            function Remove(id) {
                if (confirm('你确定要删除吗？')) {
                    $.ajax({
                        url: '../api/Users/'+id,
                        type: 'delete',
                        dataType: 'json',
                        success: function (data) {
                            console.log(data)
                            $.getJSON("../api/Users", LoadUsers)
                        }
                    })
                }
            }
        </script>
</body>
</html>
